<template>
  <div class="app-container org-tab-info" >
    <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
      <div style="text-align:center; font-size:20px ;margin-top: -40px" >{{form.flowName}}</div>
      <hr>
      <div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="流程表单" name="first">
            <el-form ref="form" :model="form"  label-width="100px">
            <el-row>
              <el-col :span="12">
              <el-form-item label="流程创建" class="item" >
                <span class="flowStyle">{{form.flowCreation}}</span>
              </el-form-item>
              </el-col>
              <el-col :span="24">
              <el-form-item label="流程名称" class="item" >
                <span>{{form.flowName}}</span>
              </el-form-item>
              </el-col>
              <el-col :span="12">
              <el-form-item label="项目名称" class="item">
                <span>{{form.projectName}}</span>
              </el-form-item>
              </el-col>
              <el-col :span="9">
              <el-form-item label="项目类型" class="item" >
                  <span>{{labProjectOptFormat(form.labProjectOpt)}}</span>
              </el-form-item>
              </el-col>
              <el-col :span="12">
              <el-form-item label="开始日期" class="item" >
                  <span>{{form.projectStart}}</span>
              </el-form-item>
              </el-col>
              <el-col :span="10">
              <el-form-item label="结束日期" class="item" >
                  <span>{{form.projectEnd}}</span>
              </el-form-item>
              </el-col>
              <div v-if="form.labProjectOpt==1">
                <ProjectInstrumentDetail ref="instrument" :instrument="form.labProjectInstrument"></ProjectInstrumentDetail>
               </div>
                <div v-if="form.labProjectOpt==2">
                <ProjectWorkSearchDetail ref="workResearch" :workResearch="form.labProjectWorkResearch"></ProjectWorkSearchDetail>
               </div>
                <div v-if="form.labProjectOpt==3">
                <ProjectConstructionDetail ref="construction" :construction="form.labProjectConstruction"></ProjectConstructionDetail>
               </div>
                <div v-if="form.labProjectOpt==4">
                <ProjectTeachingCultivationDetail ref="teachingCultivation" :teachingCultivation="form.labProjectTeachingCultivation"></ProjectTeachingCultivationDetail>
               </div>
                <div v-if="form.labProjectOpt==5">
                <ProjectDevelopmentProjectDetail ref="developmentProject" :developmentProject="form.labProjectDevelopmentProject"></ProjectDevelopmentProjectDetail>
               </div>
              <el-col :span="24">
              <el-form-item label="项目附件" class="item">
                <el-upload
                      style="width:500px"
                      action=""
                        :limit="10"
                        show-file-list
                        :auto-upload="false"
                        :file-list="fileList"
                        :on-preview="handlePictureCardPreview"
                        multiple
                        class="uploadCss"
                    >
                      <span ></span>
                </el-upload>
              </el-form-item>
              </el-col>
              <el-col :span="24">
              <el-form-item label="备注说明"  style="height:150px" class="item">
                  <span>{{form.comments}}</span>
              </el-form-item>
              </el-col>
              </el-row>
            </el-form>
            <div class="bottom_button">
              <el-button type="primary" @click="cancel">关闭</el-button>
            </div>
           </el-tab-pane>
          <el-tab-pane label="流程签批" name="second" v-if="form.workflowId>0">
            <TaskApproval ref="task" :instanceId="form.instanceId"></TaskApproval>
          </el-tab-pane>
        </el-tabs>
    </div>
    </el-dialog>
  </div>
</template>

<script>
import { getProject_creation} from "@/api/labbase/project_creation";
import Treeselect from "@riophae/vue-treeselect";
import TaskApproval from '@/views/labdata/flowTask/task_approval.vue'
import ProjectInstrumentDetail from "@/views/labbase/project_creation/detail/projectInstrumentDetail.vue";
import ProjectWorkSearchDetail from "@/views/labbase/project_creation/detail/projectWorkSearchDetail.vue";
import ProjectConstructionDetail from "@/views/labbase/project_creation/detail/projectConstructionDetail.vue";
import ProjectTeachingCultivationDetail from "@/views/labbase/project_creation/detail/projectTeachingCultivationDetail.vue";
import ProjectDevelopmentProjectDetail from "@/views/labbase/project_creation/detail/projectDevelopmentProjectDetail.vue";

export default {
   name: "ProjectDetails",
    props:{
  },
  components: {
      TaskApproval,Treeselect,ProjectInstrumentDetail,ProjectWorkSearchDetail,ProjectConstructionDetail,ProjectTeachingCultivationDetail,ProjectDevelopmentProjectDetail
    },
  data() {
    return {
       // 表格树数据
       deptList: [],
       // 项目类型字典
      labProjectOptOptions: [],
      title:'',
      // 遮罩层
      loading: true,
      // 是否显示弹出层
      open: false,
      flowName:"",
      activeName: 'first',
      //员工列表
      userList: [],
      //文件列表
      fileList: [],
      // 查询参数
      queryParams: {},
      // 表单参数
      form: {},
      host:process.env.VUE_APP_PROXY,
      detailData:{},
    };
  },
  created() {
      this.getDicts("labProjectOpt").then(response => {
      this.labProjectOptOptions = response.data;
    });
  },
  methods: {
      handleUpdate(row){
        this.activeName = 'first';
        const instanceId = row.instanceId || this.ids;
        getProject_creation(instanceId).then(response => {
        this.form = response.data;
        this.fileList = [];
        this.$emit("flowName",response.data.flowName);
        if(this.form.images){
                this.form.images.forEach(item =>{
                  this.fileList.push({
                    id: item.fileId,
                    name:item.fileName,
                    url:this.host+'/labdata/labFile/image?fileId='+item.fileId,
                  })
                });
              }
          this.open = true;
          this.title = "项目创建申请预览";
      });
      },
       // 项目类型字典翻译
    labProjectOptFormat(value) {
      return this.selectDictLabel(this.labProjectOptOptions, value);
    },
      //附件展示
    handlePictureCardPreview(file) {
      window.location.href = file.url;
      this.dialogVisible = true;
    },

    // 取消按钮
      cancel() {
        this.open = false;
        this.form = {};
      },

  },
};
</script>

<style type="text/css" scoped>
  .bottom_button{
    width: 100%;
    text-align: right;
  }
  .uploadCss .el-upload{
    display: none !important;
  }
  .item {
    margin-bottom: 2px;
  }
</style>
